<template>
  <div class="bg-white shadow-md mb-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <nav class="flex space-x-8 -mb-px">
        <Link
          v-for="item in navItems"
          :key="item.name"
          :href="item.href"
          :class="[
            isActive(item.href)
              ? 'border-blue-500 text-blue-600'
              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
            'flex items-center py-4 px-1 border-b-2 font-medium text-sm'
          ]"
        >
          <component :is="item.icon" class="w-5 h-5 mr-2" />
          {{ item.name }}
          <span
            v-if="item.count"
            class="ml-2 px-2 py-0.5 text-xs rounded-full"
            :class="isActive(item.href) ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-600'"
          >
            {{ item.count }}
          </span>
        </Link>
      </nav>
    </div>
  </div>
</template>

<script setup>
import { Link, usePage } from '@inertiajs/inertia-vue3'
import { computed } from 'vue'

const props = defineProps({
  user: Object,
  stats: Object,
  unreadNotifications: {
    type: Number,
    default: 0
  }
})

const page = usePage()
const currentUrl = computed(() => page.url)

const navItems = computed(() => [
  {
    name: '个人主页',
    href: `/profile/${props.user?.username || 'me'}`,
    icon: 'UserIcon'
  },
  {
    name: '我的文章',
    href: '/profile/posts',
    icon: 'DocumentTextIcon',
    count: props.stats?.posts_count
  },
  {
    name: '我的收藏',
    href: '/profile/favorites',
    icon: 'BookmarkIcon',
    count: props.stats?.favorites_count
  },
  {
    name: '通知',
    href: '/profile/notifications',
    icon: 'BellIcon',
    count: props.unreadNotifications > 0 ? props.unreadNotifications : null
  },
  {
    name: '关注/粉丝',
    href: '/profile/follows',
    icon: 'UserGroupIcon'
  },
  {
    name: '浏览历史',
    href: '/profile/history',
    icon: 'ClockIcon'
  },
  {
    name: '草稿箱',
    href: '/profile/drafts',
    icon: 'PencilIcon',
    count: props.stats?.drafts_count
  },
  {
    name: '设置',
    href: '/profile/settings',
    icon: 'CogIcon'
  }
])

const isActive = (href) => {
  return currentUrl.value === href || currentUrl.value.startsWith(href + '/')
}
</script>